<template lang="pug">
.cp-home.view
  el-container.c-view
    el-aside.he-aside(:width="isCollapse ? '64px': '144px'")
      .ae-title(v-text="isCollapse ? 'HY' : '环予医疗'")
      el-menu.ae-menu(
        :default-active="activePath",
        mode="vertical",
        :collapse="isCollapse",
        :collapse-transition="false",
        router=true)
        el-menu-item(
          v-for="(item, index) in menuList",
          :key="index",
          :index="item.path")
          i(:class="`el-icon-${item.icon}`")
          span(slot="title") {{item.value}}
    el-container.he-container
      el-header.cr-header
        .hr-collapse
          i(:class="`el-icon-d-arrow-${ isCollapse ? 'right' : 'left'}`", @click="handleAside")
        .hr-name
          span 欢迎登录！
          span(v-text="username")
        .hr-search
          el-row
            el-col(:span="4")
              i.el-icon-search
            el-col(:span="20")
              el-input(v-model="searchWord", placeholder="搜索...")
        .hr-user
          el-tooltip(content="问题")
            i.el-icon-question
          el-tooltip(content="消息")
            i.el-icon-bell
          el-dropdown(trigger="hover")
            .el-dropdown-link
              i.el-icon-service
            el-dropdown-menu(slot="dropdown")
              el-dropdown-item 我的消息
              el-dropdown-item 设置
              el-dropdown-item(divided, @click.native="handleLogout") 退出登录
      el-main.fix-flex-pos.cr-main
        router-view
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'home',
  data () {
    return {
      searchWord: '',
      isCollapse: false
    };
  },
  computed: {
    menuList () {
      const menuList = [];
      for (const route of this.homeRouters) {
        if (!route.hidden) {
          menuList.push(route);
        }
      }

      return menuList;
    },
    activePath () {
      return `/${this.$route.path.split('/')[1]}`;
    },
    ...mapGetters(['username', 'homeRouters'])
  },
  methods: {
    handleAside () {
      this.isCollapse = !this.isCollapse;
    },
    handleLogout () {
      this.$store.dispatch('goLogout').then(() => {
        // 自动重定向到login
        location.reload();
      });
    }
  },
  created () {
    this.$store.dispatch('setMaterialSelect');
    this.$store.dispatch('setEmpSelect');
    this.$store.dispatch('setRoleSelect');
    this.$store.dispatch('setStoreSelect');
    this.$store.dispatch('setOneDeptSelect');
    this.$store.dispatch('setKeeperSelect');
    this.$store.dispatch('setSupplySelect');
    this.$store.dispatch('setVendorBasicSelect');
    this.$store.dispatch('setMateBasicSelect');
  },
  mounted () {
    window.handleLogout = this.handleLogout;
  }
};
</script>

<style lang="sass">
@import "../styles/utils"
$HEADHEIGHT: 60px
$LINECOLOR: #e6e6e6
$BGCOLOR: #19233E
$ITEMCOLOR: #848FA9
.he-aside
  width: 100%
  overflow-y: auto
  background: $BGCOLOR
  transition: width .5s
  .ae-title
    width: 100%
    @include hlfc($HEADHEIGHT, 32px, white, 300)
    text-align: center
    background: $BGCOLOR
    font-size: 18px
  .ae-menu
    width: 100%
    border-right: 0
  .horizontal-collapse-transition
    transition: none
  .el-menu-item
    background-color: #232F49
    color: $ITEMCOLOR
    border-bottom: 2px solid $BGCOLOR
    i
      color: $ITEMCOLOR
  .el-menu-item.is-active
    background-color: #5D9BFB
    color: white
    i
      color: white
.he-container
  position: relative
  .cr-header
    position: relative
    padding: 0
    height: $HEADHEIGHT!important
    background-color: #FFFFFF
    border-bottom: 2px solid #eee
    .hr-collapse
      margin-left: 20px
      @include hlfc(60px, 20px, #909399, 600)
    .hr-name
      position: absolute
      top: 0
      bottom: 0
      left: 60px
      @include hlfc(60px, 13px, #6495ed, 500)
      @include lineOf(120px)
    .hr-search
      position: absolute
      top: 0
      bottom: 0
      left: 180px
      width: 200px
      color: #999
      text-align: center
      height: $HEADHEIGHT
      line-height: $HEADHEIGHT
      .el-input__inner
        padding: 0
        border: 0
    .hr-user
      position: absolute
      right: 32px
      top: 0
      bottom: 0
      i
        font-size: 20px
        margin-left: 10px
      .el-dropdown-link
        position: relative
        height: $HEADHEIGHT
        line-height: $HEADHEIGHT
        span, img
          display: inline-block
          vertical-align: middle
        span
          color: black
          margin-right: 8px
        img
          width: 40px
          height: 40px
          border-radius: 50%
  .cr-main
    position: absolute
    left: 0
    top: $HEADHEIGHT
    padding: 0
    overflow-x: hidden
    overflow-y: auto
.icon-act
  font-size: 16px
  margin-right: 3px
</style>
